<template>
  <view class="address-panel">
    <!-- 关闭按钮 -->
    <text class="close icon-close" @tap="emit('close')"></text>
    <!-- 标题 -->
    <view class="title">配送至</view>
    <!-- 内容 -->
<!--    <view class="content">
      <view class="item" v-for="item in selecteAddress" :key="item.id" @tap="toggleDefault(item)">
        <view class="user">{{item.receiver}} {{item.contact}}</view>
        <view class="address">{{ item.fullLocation }} {{ item.address }}</view>
        <text class="icon" :class="{ 'icon-checked': item.isDefault }"></text>
      </view>
    </view> -->
	<view class="content">
	  <view class="item">
	    <view class="user">李明 13824686868</view>
	    <view class="address">北京市顺义区后沙峪地区安平北街6号院</view>
	    <text class="icon icon-checked"></text>
	  </view>
	  <view class="item">
	    <view class="user">王东 13824686868</view>
	    <view class="address">北京市顺义区后沙峪地区安平北街6号院</view>
	    <text class="icon icon-ring"></text>
	  </view>
	  <view class="item">
	    <view class="user">张三 13824686868</view>
	    <view class="address">北京市朝阳区孙河安平北街6号院</view>
	    <text class="icon icon-ring"></text>
	  </view>
	</view>
    <view class="footer">
      <view class="button primary"><navigator url="/pagesMember/address-form/address-form"> 新建地址 </navigator></view>
      <view v-if="false" class="button primary">确定</view>
    </view>
  </view>
</template>

<script setup lang="ts">
// import { defineProps, defineEmits, ref, computed, onMounted } from 'vue';
// import { useAddressStore } from '@/stores/modules/address';



// 定义父组件需要的自定义事件
const emit = defineEmits<{
  (event: 'close'): void
}>();

// 在mounted时输出addressList
// onMounted(() => {
//   console.log(props.addressList);
// });

// 使用地址存储
// const addressStore = useAddressStore();

// 选中的地址
// const selecteAddress = computed(() => {
//   // 如果有就展示选中的地址，如果没有就展示默认的地址
//   return addressStore.selectedAddress ? addressStore.selectedAddress : props.addressList;
// });

// wochuan
// const wochuan = ref({});

// 切换默认地址
// const toggleDefault = (item: any) => {
//   // 遍历selecteAddress，将除了当前项以外的其他项的isDefault属性设置为false
//   selecteAddress.value.forEach((address: any) => {
//     if (address !== item) {
//       address.isDefault = false;
//     }
//   });
//   // 将当前项的isDefault属性设置为true
//   item.isDefault = true;
//   // 如果使用 Vuex 或其他状态管理工具，可以在这里触发更新
//   if (item.isDefault) {
//     wochuan.value = item;
//     console.log("获取到当前点击的地址", wochuan.value);
//     emit('err', wochuan.value); // 触发自定义事件并传递wochuan对象给父组件
//   }
// };
</script>


<style lang="scss">
.address-panel {
  padding: 0 30rpx;
  border-radius: 10rpx 10rpx 0 0;
  position: relative;
  background-color: #fff;
}

.title {
  line-height: 1;
  padding: 40rpx 0;
  text-align: center;
  font-size: 32rpx;
  font-weight: normal;
  border-bottom: 1rpx solid #ddd;
  color: #444;
}

.close {
  position: absolute;
  right: 24rpx;
  top: 24rpx;
}

.content {
  min-height: 300rpx;
  max-height: 540rpx;
  overflow: auto;
  padding: 20rpx;
  .item {
    padding: 30rpx 50rpx 30rpx 60rpx;
    background-size: 40rpx;
    background-repeat: no-repeat;
    background-position: 0 center;
    background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/locate.png);
    position: relative;
  }
  .icon {
    color: #999;
    font-size: 40rpx;
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    right: 0;
  }
  .icon-checked {
    color: #27ba9b;
  }
  .icon-ring {
    color: #444;
  }
  .user {
    font-size: 28rpx;
    color: #444;
    font-weight: 500;
  }
  .address {
    font-size: 26rpx;
    color: #666;
  }
}

.footer {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0 40rpx;
  font-size: 28rpx;
  color: #444;

  .button {
    flex: 1;
    height: 72rpx;
    text-align: center;
    line-height: 72rpx;
    margin: 0 20rpx;
    color: #fff;
    border-radius: 72rpx;
  }

  .primary {
    color: #fff;
    background-color: #27ba9b;
  }

  .secondary {
    background-color: #ffa868;
  }
}
</style>
